<template>
  <!--    职业类型     -->

  <view class="allContainer">
    <!-- <image
      :src="bgUrl"
      :style="[
        { width: '413rpx' },
        { height: '1378rpx' },
        { position: 'absolute' },
        { top: '178rpx' },
        { right: '0' },{zIndex:'1'},
      ]"
    /> -->

    <view>
      <view class="baseBg">
        <image class="textImg" :src="partTextImgUrl" />
        <image class="imgFloatRight" :src="imgPavilion" />
        <view :style="[{ paddingRight: '32rpx' }, { paddingLeft: '32rpx' }]">
          <view class="contentBack">
            <view
              :style="[
                { marginTop: '33rpx' },
                { display: 'flex' },
                { alignItems: 'center' },
              ]"
            >
              <!-- <span class="smallTitleGreen">毕方陪你漫游</span> -->
              <view class="blackBox"> </view>
              <view>
                <span
                  :class="
                    titleItem.color == 1 ? 'smallTitleGreen' : 'smallTitleRed'
                  "
                  v-for="(titleItem, titleIndex) in careerCategory.title"
                  :key="titleIndex"
                  >{{ titleItem.label }}</span
                >
              </view>
            </view>
            <view style="margin: 28rpx 34rpx">
              <!-- <span class="smallTitleGreen">以下为你列举了</span>
            <span class="smallTitleRed">适合你的职业</span> -->

              <span
                :class="
                  subTitleItem.color == 1 ? 'smallTitleGreen' : 'smallTitleRed'
                "
                style="font-size: 28rpx"
                v-for="(subTitleItem, subTitleIndex) in careerCategory.subTitle"
                :key="subTitleIndex"
                >{{ subTitleItem.label }}</span
              >
            </view>
            <image class="purpleLine" :src="purpleLine"></image>

            <view
              v-for="(descListItem, descListIndex) in careerCategory.descList"
              :key="descListIndex"
              :style="[
                { marginTop: descListIndex == '0' ? '-40rpx' : '0' },
                { marginBottom: '40rpx' },
              ]"
            >
              <view class="gridBox">
                <span
                  class="gridItem"
                  v-for="(
                    careerListItem, careerListIndex
                  ) in descListItem.careerList"
                  :key="careerListIndex"
                >
                  {{ careerListItem }}
                </span>
              </view>

              <view class="onePartContent"
                ><view class="blueBox"></view>
                <view style="flex: 1">{{ descListItem.desc }}</view>
              </view>
            </view>
            <image :src="bottomImg" class="bottomImg" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // components: {},
  props: {
    isBlur: {
      type: Boolean,
      default: false,
    },
    careerCategory: {
      type: Object,
      default() {
        return {
          descList: [
            {
              careerList: ["测试测试", "测试测试", "测试测试", "测试测试"],
              desc: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
            },
            {
              careerList: ["测试测试", "测试测试", "测试测试", "测试测试"],
              desc: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
            },
            {
              careerList: ["测试测试", "测试测试", "测试测试", "测试测试"],
              desc: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
            },
            {
              careerList: ["测试测试", "测试测试", "测试测试", "测试测试"],
              desc: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
            },
            {
              careerList: ["测试测试", "测试测试", "测试测试", "测试测试"],
              desc: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
            },
          ],
          subTitle: [
            {
              color: "1",
              label: "测试测试测试测试",
            },
            {
              color: "2",
              label: "测试测试测试测试",
            },
          ],
          title: [
            {
              color: "1",
              label: "测试测试测试测试",
            },
            {
              color: "2",
              label: "测试测试测试测试",
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      bgUrl:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessResult/bg_part5.png",
      partTextImgUrl: this.$imgBaseSelf + "career/careerAssessNew/title5.png",
      purpleLine: this.$imgBaseSelf + "career/careerAssessNew/purpleLine.png",
      imgPavilion:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessNew/sunCloud.png",
      bottomImg:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessNew/bottom.png",
    };
  },
  mounted() {
    uni
      .createSelectorQuery()
      .in(this)
      .select(".allContainer")
      .boundingClientRect((rect) => {
        this.$emit("listenRect", rect, 5);
      })
      .exec();
  },
  methods: {
    loadMore() {},
  },
};
</script>

<style lang="scss" scoped>
.allContainer {
  position: relative;
  padding-bottom: 60rpx;
  width: 100%;
}

.textImg {
  height: 130rpx;
  width: 690rpx;
  image-rendering: -webkit-optimize-contrast;
  z-index: 9;
  position: relative;
}
.baseBg {
  width: 100%;
  // background-size: 413rpx auto;
  // background-image: url($img-base + "career/careerAssessResult/bg_part5.png");
  // background-repeat: no-repeat;
  // background-position: top right;
}

.gridItem {
  font-size: 30rpx;
  color: #aa4dc4;
  font-weight: 600;
  box-sizing: border-box;
  background-color: #f0efff;

  border-style: solid;
  border-width: 1rpx;
  //border-radius: 5rpx;

  margin-left: 24rpx;
  margin-bottom: 14rpx;

  border-image-source: linear-gradient(to top, #aea8f5 0%, #ffffff 100%);
  border-image-slice: 1;
  clip-path: inset(0 round 5px);
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  padding-left: 24rpx;
  padding-right: 24rpx;
}
.imgFloatRight {
  position: absolute;
  width: 272rpx;
  height: 142rpx;
  right: 0rpx;
  top: 148rpx;
  z-index: 9;
}
.contentBack {
  position: relative;
  width: 100%;
  margin-top: -10rpx;
  background: linear-gradient(
    to bottom,
    #fbdefe 0%,
    #fff3f4 50rpx,
    #f6f4df 80rpx,
    #f9f7e5 100%
  );
  padding: 20rpx 0 50rpx 0;
  border-radius: 0 15rpx 15rpx 15rpx;
}

.blackBox {
  content: "";
  width: 10rpx;
  max-width: 10rpx;
  height: 38rpx;
  margin-top: 6rpx;
  margin-right: 20rpx;
  background: #000;
  color: #000;
  font-size: 26rpx;
}
.purpleLine {
  width: 100%;
  height: 120rpx;
  margin-top: -28rpx;
}
.gridBox {
  display: flex;
  flex-wrap: wrap;
}

.smallTitleGreen {
  font-size: 34rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #000;
  //line-height: 120rpx;
}

.smallTitleRed {
  font-size: 34rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ed5c22;
  //	line-height: 120rpx;
}

.blueBox {
  width: 26rpx;
  height: 20rpx;
  background: linear-gradient(to right, #d090e2 0%, #f9f7e5 100%);
  margin-top: 10rpx;
  margin-right: 10rpx;
}

.onePartContent {
  font-size: 28rpx;
  color: #555555;
  margin-top: 20rpx;
  line-height: 48rpx;
  padding: 0 32rpx;
  display: flex;
}
.bottomImg {
  position: absolute;
  width: 100%;
  height: 40rpx;
  right: 0rpx;
  bottom: 0rpx;
}
</style>
